<template>
  <a-row class="h-full">
    <a-col :span="6" class="image-bg">
      <a-image class="image w-full h-full" fit="cover" src="http://192.168.50.47:5245/img/login-bg.png"></a-image>
    </a-col>
    <a-col :span="8"></a-col>
    <a-col :span="10" class="h-full flex justify-center items-center">
      <div class="login-form">
        <a-typography-title class="mt-0">
          欢迎登录
        </a-typography-title>
        <a-form :model="loginForm" ref="loginFormRef">
          <a-form-item :hide-label="true" field="username" :rules="[{required:true,message:'请输入用户名'}]"
                       validate-trigger="blur">
            <a-input placeholder="请输入用户名" v-model="loginForm.username">
              <template #prefix>
                <icon-user/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item :hide-label="true" field="password" :rules="[{required:true,message:'请输入密码'}]"
                       validate-trigger="blur">
            <a-input placeholder="请输入密码" v-model="loginForm.password">
              <template #prefix>
                <icon-lock/>
              </template>
            </a-input>
          </a-form-item>
          <a-form-item :hide-label="true">
            <a-checkbox v-model="loginForm.isRemember" class="mr-2"/>
            记住我
          </a-form-item>
          <a-form-item :label-col-props="{span:0}" :wrapper-col-props="{span:24}">
            <a-button class="w-full" type="primary" @click="handleLogin">登录</a-button>
          </a-form-item>
          <a-form-item :label-col-props="{span:0}" :wrapper-col-props="{span:24}" validate-trigger="blur">
            <a-button class="w-full" @click="handleRegister">注册账号</a-button>
          </a-form-item>
        </a-form>
        <a-row justify="center">
          <a-divider orientation="center">第三方授权登录</a-divider>
          <GithubIcon @updateCode="handleGithub" :size="24"/>
        </a-row>

      </div>
    </a-col>
  </a-row>

</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import GithubIcon from "./components/githubIcon.vue";
import {Md5} from 'ts-md5';
import {getTokenByCode, login} from "@/api/login";
import router from "@/router";
import {setStorage, USER_TOKEN} from "@/utils/localStorage";
import {sleep} from "@/utils/sleep";
import {Message} from "@arco-design/web-vue";
import useUser from '@/store/user'

const userStore = useUser();

// 登录表单信息
const loginForm = reactive({username: 'admin', password: 'admin', isRemember: true})
const loginFormRef = ref();

async function handleGithub(code: string) {
  const {data} = await getTokenByCode(code);
  await handleToken(data)
}


async function handleLogin() {
  const error = await loginFormRef.value.validate();
  if (error) return;
  const loginData = {...loginForm};
  loginData.password = Md5.hashStr(loginData.password)
  const {data} = await login(loginData);
  await handleToken(data)
}


async function handleToken(token?: string) {
  if (!token) {
    Message.error('登录失败 请稍后重试')
    return
  }
  // 将token存起来
  setStorage(USER_TOKEN, token)
  // 初始化用户信息
  userStore.getInfo()
  await sleep();
  Message.success('登录成功 即将进入系统');
  await router.push('/dashboard')
}

function handleRegister() {

}
</script>

<style scoped lang="less">
.image-bg {
  overflow: hidden;
  height: 100%;

  .image {
    :deep(img) {
    @apply w-full h-full;
    }
  }
}

.login-form {
  width: 300px;
}
</style>